<template>
  <div class="dashboard-container">
    <div class="card-container">
      <el-card class="box-card" style="margin: 20px auto; width: 800px">
        <el-form
          ref="form"
          :model="form"
          label-width="120px"
          style="height: 100%"
          :rules="rules"
        >
          <el-form-item label="旧密码：" prop="oldPassword">
            <el-input
              v-model="form.oldPassword"
              :type="passwordType"
              placeholder="旧密码"
              name="oldPassword"
              tabindex="2"
            />
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              v-model="form.newPassword"
              :type="passwordType"
              placeholder="新密码"
              name="newPassword"
              tabindex="2"
            />
          </el-form-item>
          <el-form-item label="确认新密码：" prop="confirmNewPassword">
            <el-input
              v-model="form.confirmNewPassword"
              :type="passwordType"
              placeholder="确认新密码"
              name="confirmNewPassword"
              tabindex="2"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              icon="el-icon-edit-outline"
              :disabled="
                !form.oldPassword || !form.newPassword || !form.confirmNewPassword
              "
              @click="onSubmit('form')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { editPsw } from "@/api/user";

export default {
  name: "editPsw",
  components: {},
  data() {
    const pswValidator = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error("密码至少为6位数"));
      }
      callback();
    };
    return {
      info: {},
      isEdit: false,
      loading: false,
      passwordType: "password",
      rules: {
        oldPassword: [
          { required: true, trigger: "blur", message: "旧密码不能为空" },
          {
            trigger: "blur",
            validator: pswValidator,
          },
        ],
        newPassword: [
          { required: true, trigger: "blur", message: "新密码不能为空" },
          {
            trigger: "blur",
            validator: pswValidator,
          },
        ],
        confirmNewPassword: [
          { required: true, trigger: "blur", message: "确认新密码不能为空" },
          {
            trigger: "blur",
            validator: pswValidator,
          },
        ],
      },
      form: {
        oldPassword: "",
        newPassword: "",
        confirmNewPassword:""
      },
    };
  },
  async created() {},
  methods: {
    onSubmit(formName) {
      const { validate } = this.$refs[formName];
      validate((valid) => {
        if (valid) {
          this._submitData(this.form);
        }
      });
    },
    async _submitData(params) {
      this.loading = true;
      let res = await editPsw(params);
      this.loading = false;
      if (res.code === 1) {
        this.$message({
          message: "密码修改成功，请重新登录！",
          type: "success",
          duration: 1 * 1000,
        });
        setTimeout(() => {
          localStorage.removeItem('token')
          localStorage.removeItem('userInfo')
          this.$router.replace('/login')
        }, 1500);
      }
    },
  },
  computed: {},
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  text-align: center;
  height: 100%;
  div::-webkit-scrollbar {
    width: 0 !important;
    display: none;
  }
  ::v-deep .el-card__body {
    height: 100%;
  }
  .card-container {
    // width: 50%;
    // margin: 60px auto 30px;
    text-align: left;
    .my-card {
      height: 80vh;
      overflow-y: auto;
      margin: 30px 80px 0;
      .content {
        line-height: 1.5;
        text-indent: 2em;
      }
    }
    .edit-card {
      margin: 10px 0;
    }
    .input-row {
      margin: 20px 0 0;
    }
  }
  .my-img {
    width: 400px;
    height: 400px;
    cursor: pointer;
    margin: auto;
    object-fit: cover;
  }
  .my-img2 {
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
